<template>
  <div class="consumer-page activity-list-page">
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item :to="{ path: '/shopUser'}">Users</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <!--serchBox-->
      <div class="search-box">
        <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"
                 class="demo-ruleForm main-search-box">
          <el-row>
          <!--Username-->
          <el-form-item label="Username" style="width: 140px;">
            <el-input v-model="searchForm.name" placeholder=""></el-input>
          </el-form-item>
          <!--Phone-->
          <el-form-item label="Phone" style="width: 200px;">
            <el-input v-model="searchForm.account" placeholder=""></el-input>
          </el-form-item>
          <!--Status-->
          <el-form-item label="Status" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px" v-model="searchForm.status" placeholder="">
              <el-option v-for="i in statusOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
          </el-row>
          <el-row>
          <!--Sort by-->
          <el-form-item label="Sort by" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px" v-model="searchForm.sort" placeholder="">
              <el-option v-for="i in sortOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
          <!--search-->
          <el-form-item style="margin-top: 37px;margin-left: 30px;">
            <el-button @click="getList" type="primary" style="width:80px">Search</el-button>
          </el-form-item>
          <el-form-item style="margin-top: 37px">
            <el-button @click="$router.push('/shopUserNew')" type="success" style="width:80px">New</el-button>
          </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!--list-->
      <div class="list-items-box">
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          border
          ref="singleTable"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <!--view-->
          <el-table-column
            label="View"
            align="center"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="userView(scope.row.id)">View</el-button>
            </template>
          </el-table-column>
          <!--edit-->
          <el-table-column
            prop="" label="Edit"
            align="center"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="userEdit(scope.row.id)">Edit</el-button>
            </template>
          </el-table-column>
          <!--ID-->
          <el-table-column
            prop="id"
            label="ID"
            align="center"
            min-width="80">
          </el-table-column>
          <!--status-->
          <el-table-column
            prop="status"
            label="Status"
            align="center"
            min-width="140">
            <template slot-scope="scope">
              <div>{{getStatus(scope.row.status)}}</div>
            </template>
          </el-table-column>
          <!--Username-->
          <el-table-column
            prop="name"
            label="Username"
            align="center"
            min-width="150">
            <template slot-scope="scope">
              <div>{{unicodeTozawgyi(scope.row.name)}}</div>
            </template>
          </el-table-column>
          <!--Facebook ID-->
          <el-table-column
            prop="facebookId"
            label="Facebook ID"
            align="center"
            min-width="120">
          </el-table-column>
          <!--Registration Phone-->
          <el-table-column
            prop="account"
            label="Registration Phone"
            align="center"
            min-width="150">
          </el-table-column>
          <!--Seller Category-->
          <el-table-column
            prop=""
            label="Seller Category"
            align="center"
            min-width="130">
          </el-table-column>
          <!--Notes-->
          <el-table-column
            prop="notes"
            label="Notes"
            align="center"
            min-width="180">
            <template slot-scope="scope">
              <div>{{unicodeTozawgyi(scope.row.notes)}}</div>
            </template>
          </el-table-column>
          <!--Total Ad-->
          <el-table-column
            prop="totalAd"
            label="Total Ad"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Pending Ad-->
          <el-table-column
            prop="pendingAdCount"
            label="Pending Ad"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Active Ad-->
          <el-table-column
            prop="activeAdCount"
            label="Active Ad"
            align="center"
            min-width="120">
          </el-table-column>
          <!--Sold Ad-->
          <el-table-column
            prop="soldAdCount"
            label="Sold Ad"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Deleted Ad-->
          <el-table-column
            prop="deletedAdCount"
            label="Deleted Ad"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Draft Ad-->
          <el-table-column
            prop="draftAdCount"
            label="Draft Ad"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Deactivated Ad-->
          <el-table-column
            prop="deactivatedAdCount"
            label="Deactivated Ad"
            align="center"
            min-width="130">
          </el-table-column>
          <!--Rejected Ad-->
          <el-table-column
            prop="supendedAdCount"
            label="Rejected Ad"
            align="center"
            min-width="120">
          </el-table-column>
          <!--Duplicate Ad-->
          <el-table-column
            prop=""
            label="Duplicate Ad"
            align="center"
            min-width="110">
          </el-table-column>
          <!--Ad Reported-->
          <el-table-column
            prop="adReportedCount"
            label="Ad Reported"
            align="center"
            min-width="110">
          </el-table-column>
          <!--Reported Ad-->
          <el-table-column
            prop="reportedAdCount"
            label="Reported Ad"
            align="center"
            min-width="110">
          </el-table-column>
          <!--Reported Ad suspended count-->
          <el-table-column
            prop="reportedSuspendedCount"
            label="Reported Ad suspended count"
            align="center"
            min-width="230">
          </el-table-column>
          <!--Report User-->
          <el-table-column
            prop="reportUserCount"
            label="Report User"
            align="center"
            min-width="110">
          </el-table-column>
          <!--Reported By Use-->
          <el-table-column
            prop="reportedByUserCount"
            label="Reported By User"
            align="center"
            min-width="140">
          </el-table-column>
          <!--Chat Blocked by User-->
          <el-table-column
            prop="chatBlockedCount"
            label="Chat Blocked by User"
            align="center"
            min-width="170">
          </el-table-column>
          <!--Followers-->
          <el-table-column
            prop="followersCount"
            label="Followers"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Following-->
          <el-table-column
            prop="followingCount"
            label="Following"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Created Date-->
          <el-table-column
            prop="createTime"
            label="Created Date"
            align="center"
            min-width="160">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.createTime,)}}</p>
            </template>
          </el-table-column>
          <!--Created By-->
          <el-table-column
            prop="createBy"
            label="Created By"
            align="center"
            min-width="240">
          </el-table-column>
          <!--Last Login Date-->
          <el-table-column
            prop="lastLoginDate"
            label="Last Login Date"
            align="center"
            min-width="160">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.lastLoginDate,)}}</p>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block" style="margin-top: 15px;text-align: center;">
          <el-pagination
            @size-change="handleChangeSize"
            @current-change="handleChangePage"
            :current-page="pageData.pageNum"
            :page-size="pageData.pageSize"
            :page-sizes="[10, 20, 50, 100, 500]"
            :page-count="pageInfo.totalPages"
            :total="pageInfo.totalCount"
            layout="total, prev, pager, next, jumper, sizes">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

  import {shopUserSearch} from '../../api/guc_api.js'
  import qs from 'qs';

  export default {
    name: 'shopUser',
    data() {
      return {
        searchForm: {
          status: '',
          account: '',
          name: '',
          sort: 'create_time desc',
        },
        statusOption: [
          {
            label: '',
            value: ''
          },
          {
            label: 'Active',
            value: '1'
          },
          {
            label: 'Not interested',
            value: '0'
          },
          {
            label: 'Stopped business',
            value: '3'
          },
          {
            label: 'Called but no answer',
            value: '5'
          },
          {
            label: 'Wrong phone number',
            value: '6'
          },
          {
            label: 'Suspended',
            value: '4'
          },
          {
            label: 'Deleted',
            value: '2'
          },
        ],
        sortOption: [
          {
            label: 'Created date latest first',
            value: 'create_time desc'
          },
          {
            label: 'Active ad most first',
            value: 'active_ad desc'
          },
          {
            label: 'Total ad most first',
            value: 'total_ad desc'
          },
        ],
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableLoading: false,
        tableData: [],
        // 当前行
        currentRow: null,
      }
    },
    methods: {
      // 用来控制表格行点击选中状态
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //用来控制单双行样式
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'odd-row';
        }
        else if (rowIndex % 2 === 0) {
          return 'even-row';
        }
        return '';
      },
      handleChangeSize(val) {
        this.pageData.pageSize = parseInt(val)
        this.pageData.pageNum = 1
        this.getList()
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      //跳转到用户预览页面
      userView(id) {
        this.$router.push({
          path: '/shopUserView',
          query: {
            id: id
          }
        })
      },
      //跳转到用户新增编辑页面
      userEdit(id) {
        this.$router.push({
          path: '/shopUserNew',
          query: {
            id: id
          }
        })
      },
      //日期格式化
      dateFormat(value) {
        if (!value) {
          return ''
        }
        else {
          var date = new Date(value)
          var Y = date.getFullYear()
          var m = date.getMonth() + 1
          var d = date.getDate()
          var H = date.getHours()
          var i = date.getMinutes()
          var s = date.getSeconds()
          if (m < 10) {
            m = '0' + m
          }
          if (d < 10) {
            d = '0' + d
          }
          if (H < 10) {
            H = '0' + H
          }
          if (i < 10) {
            i = '0' + i
          }
          if (s < 10) {
            s = '0' + s
          }
          let t = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s
          return t
        }
      },
      // 状态格式化
      getStatus(value) {
        if (value == 0) {
          return 'Not interested';
        }
        else if (value == 1) {
          return 'Active';
        }
        else if (value == 2) {
          return 'Deleted';
        }
        else if (value == 3) {
          return 'Stopped business';
        }
        else if (value == 4) {
          return 'Suspended';
        }
        else if (value == 5) {
          return 'Called but no answer';
        }
        else if (value == 6) {
          return 'Wrong phone number';
        }
      },
      //对表格中的内容进行unicode转交集
      unicodeTozawgyi(value){
        if(value){
          return this.$translateLang(value,'unicodeTozawgyi')||''
        }else{
          return value;
        }
      },
      // message alert 用于前端错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      getList(pageNum) {
        window.scrollTo(0, 0)
        this.tableLoading = true;
        if (pageNum == 1) {
          this.pageData.pageNum = 1;
        }
        if(this.searchForm.name){
          this.searchForm.name = this.$translateLang(this.searchForm.name||'', 'zawgyiTounicode')||''
        }
        shopUserSearch(Object.assign(this.searchForm, this.pageData)).then((res) => {
          this.tableData = res.data.object.list || []
          // 分页信息配置
          this.pageInfo.totalPages = res.data.object.pages
          this.pageInfo.totalCount = res.data.object.total
          this.tableLoading = false;
        }).catch((e) => {
          this.tableLoading = false;
        })
      },
    },
    mounted() {
      this.getList(1)
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    /*padding-top: 20px;*/
    border-bottom: 1px solid #eee;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .more-box, .list-items-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list-items-box {
    /*margin-right: 10%;*/
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .change-status {
    font-size: 14px;
    margin-right: 10px;
  }

  .options {
    padding: 0px 0 20px 0;
  }

  .container-padding {
    padding: 0 40px;
  }

  .list-notes {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

  .activity-list-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
